<template>
	<div class="banner-rd">
		<div class="swiper">
			<swiper :options="swiperOption" ref="mySwiper">
			    <!-- slides -->
			    <swiper-slide v-for="(data,index) in swiperImg" :key="index">
			    	<a :href="data.url" v-if="canClick">
			    		<img class="swiper-image" :src="data.imgUrl" alt="" :style="{height:swiperHeight}">
			    	</a>

			    	<img v-else class="swiper-image" :src="data" alt="" :style="{height:swiperHeight}">
			    </swiper-slide>
			    <!-- Optional controls -->
			    <div class="swiper-pagination"  slot="pagination"></div>
			  </swiper>

		</div>
		<div class="slider-bg" v-if="hadSlider"></div>
	</div>
</template>

<style scope lang="scss">
	.banner-rd{
		min-height:180px;
	}
	.swiper{
		overflow: hidden;
		.swiper-image{
			width:100%;
		}
	}
	.slider-bg{
		width: 100%;
	    height: a(100px);
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 16;
	    background: -webkit-gradient(linear,left top,left bottom,from(#000),to(transparent));
	    background: -webkit-linear-gradient(#000,transparent);
	    background: -o-linear-gradient(#000,transparent);
	    background: linear-gradient(#000,transparent);
	}
</style>

<script>
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'

	export default{
		name: "banner",
		components:{swiper,swiperSlide},
		props:["swiperImg","canClick","swiperHeight","hadSlider"],
		data() {
	      return {
	        swiperOption: {
	          pagination: {
	            el: '.swiper-pagination',
	          },
	          autoplay:true
	        }
	      }
	    },
		computed:{
			swiper(){
				return this.$refs.mySwiper.swiper
			}
		},

	}

</script>